<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="primary" @click="importModalVisible = true">导入</el-button>
    </div>
    <div class="table-container">
      <jdf-table :columns="columns" :pagination-attrs="paginationAttrs" :data="tableData"> </jdf-table>
    </div>
    <el-dialog :title="formType === 'create' ? '新增' : '编辑'" :visible.sync="dialogFormVisible">
      <el-form :model="currentRow" :rules="rules" ref="form" label-width="160px">
        <el-form-item label="材料标题" prop="title">
          <el-input v-model="currentRow.title" />
        </el-form-item>
        <el-form-item label="材料内容" prop="content">
          <el-input v-model="currentRow.content" type="textarea" rows="4" />
        </el-form-item>
        <el-form-item label="附件" prop="attachment">
            <el-button size="small" type="primary" @click="uploadModalVisible = true">点击上传</el-button>
           <jdf-upload-modal
              type="upload"
              modal-title="上传文件"
              :visible.sync="uploadModalVisible"
              accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.rar,.zip"
              :biz-id="id"
              :space-code="spaceCode"
              file-type="bizFile"
              :before-upload-func="beforeUploadFunc"
              :save-func="saveFiles"
              multiple
              auto-upload
              autoClose
            ></jdf-upload-modal>
        </el-form-item>
        <el-form-item label="是否启用" prop="isEnabled">
          <el-switch v-model="currentRow.isEnabled" active-value="1" inactive-value="0" active-text="是" inactive-text="否" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>

    <jdf-upload-modal
      :visible.sync="importModalVisible"
      :import-func="importFunc"
      :download-template-func="downLoadTemplate"
      @importCallback="importCallback"
      auto-upload
      download-template
    ></jdf-upload-modal>
  </div>
</template>

<script>
import { getPageSubjectPage, saveSubject } from '@/api/business/subjectManage';
import listTableMixins from '@/mixins/listTableMixins';
import { messageConfirm, messageAlert } from '@/api/utils/pc-message';

export default {
  name: 'EightProvisionsStudy',
  mixins: [listTableMixins],
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 导入弹窗
      importModalVisible: false,
      // 上传材料弹窗
      uploadModalVisible: false,
      dialogFormVisible: false,
      formType: 'create',
      fileList: [],
      currentRow: {
        isEnabled: '1',
        title: '',
        content: '',
        attachment: ''
      },
      columns: [
        {
          label: '序号',
          width: 50,
          type: 'index',
        },
        { label: '材料标题', prop: 'title' },
        { label: '材料内容', prop: 'content', width: 300 },
        { label: '附件', prop: 'attachment', render: (h, params) => h('a', { attrs: { href: params.row.attachment, target: '_blank' } }, '查看附件') },
        { label: '是否启用', prop: 'isEnabled', render: (h, params) => h('span', params.row.isEnabled === '1' ? '是' : '否') },
        {
          label: '操作',
          render: (h, params) =>
            h('div', [
              h(
                'el-button',
                {
                  props: {
                    type: 'text',
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params.row);
                    },
                  },
                },
                '编辑',
              ),
              h(
                'el-button',
                {
                  props: {
                    type: 'text',
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row);
                    },
                  },
                },
                '删除',
              ),
            ]),
        },
      ],
      rules: {
        title: [{ required: true, message: '请输入材料标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入材料内容', trigger: 'blur' }],
      },
      tableData: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    handleAdd() {
      this.dialogFormVisible = true;
      this.formType = 'create';
      this.resetForm();
    },
    handleEdit(row) {
      this.formType = 'edit';
      this.currentRow = { ...row };
      this.fileList = row.attachment ? [{ name: row.attachment.split('/').pop(), url: row.attachment }] : [];
      this.dialogFormVisible = true;
    },
    handleDelete(row) {
      messageConfirm(
        '确认删除该记录?',
        () => {
          messageAlert('删除成功');
          this.fetchData();
        },
        () => {},
      );
    },
    async fetchData() {
      const res = await getPageSubjectPage({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
      this.tableData = res.data;
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // TODO
        }
      });
    },
    resetForm() {
      this.currentRow = {
        title: '',
        content: '',
        attachment: '',
        isEnabled: '1'
      };
      this.fileList = [];
    },
    /**
       * 数据上传前钩子,若返回 Promise 且被 reject，则停止上传
       */
      beforeUploadFunc(fileList) {
        return Promise.resolve();
      },
      /**
       * 上传文件后，文件数据保存到业务表的方法，参数为文件上传成功后返回的文件信息列表
       */
      saveFiles(fileList) {
      },
    /**
     * 数据导入方法
     */
    downLoadTemplate() {},
    /**
     * 导入方法
     */
    importFunc(formData) {},
    /**
     * 文件上传成功后的回调
     */
    importCallback() {},
  },
};
</script>

<style scoped lang="scss">
.app-container {
  .filter-container {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
